<template>
    <el-dialog
        :visible.sync="dialogVisible"
        title="订单详情"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        width="1200px"
    >
        <div class="order-detail">
            <div class="info">
                <div>订单号：{{detail.orderInfo.orderNo}}</div>
                <div>出发时间：{{detail.orderInfo.startTime}}</div>
                <div>座位费：{{detail.orderInfo.seatMoney/100}}</div>
                <div>总金额：{{detail.orderInfo.totalMoney/100}}</div>
                <div>优惠金额：{{detail.orderInfo.discountMoney/100}}</div>
                <div>应付金额：{{detail.orderInfo.shouldPayMoney/100}}</div>
                <div>实付金额：{{detail.orderInfo.actuallyPayMoney/100}}</div>
                <div>起点围栏附加金额：{{detail.orderInfo.startAddressAppendMoney/100}}</div>
                <div>起点接送费：{{detail.orderInfo.startAddressFlowMoney/100}}</div>
                <div>终点围栏附加金额：{{detail.orderInfo.endAddressAppendMoney/100}}</div>
                <div>终点接送费：{{detail.orderInfo.endAddressFlowMoney/100}}</div>
                <div>支付交易号：{{detail.orderInfo.transactionId}}</div>
                <div>支付状态：{{detail.orderInfo.payStatusName}}</div>
                <div>支付时间：{{detail.orderInfo.payTime}}</div>
                <div>支付方式：{{detail.orderInfo.payType}}</div>
                <div>联系人：{{detail.orderInfo.contactsName}}</div>
                <div>联系手机号：<a @click="lookContactsPhone(detail.orderInfo.orderNo)" style="text-decoration: underline;">{{detail.orderInfo.contactsPhone}}</a></div>
                <div>班次编码：{{detail.orderInfo.arrangeCode}}</div>
                <div>班次段编码：{{detail.orderInfo.arrangeSectionCode}}</div>
                <div>活动名称：{{detail.orderInfo.activityName}}</div>
                <div>活动优惠金额：{{detail.orderInfo.activityDiscountMoney/100}}</div>
                <div>主线司机：<text v-if="detail.orderInfo.driverPhone">{{detail.orderInfo.driverName}}({{detail.orderInfo.driverPhone}})</text></div>
                <div>车型：{{detail.orderInfo.vehicleTypeName}}</div>
                <div>车牌号：{{detail.orderInfo.licensePlateNumber}}</div>
                <div>是否改签：{{detail.orderInfo.changeTicketStatus?'是':'否'}}</div>
                <div>是否评论：{{detail.orderInfo.commentStatus?'是':'否'}}</div>
                <div>是否对账：{{detail.orderInfo.reconciliationStatus?'是':'否'}}</div>
                <div>用户备注：{{detail.orderInfo.userRemark}}</div>
                <div>客服备注：{{detail.orderInfo.serviceRemark}}</div>
                <div>会员删除：{{detail.orderInfo.memberDel?'是':'否'}}</div>
                <div>订单状态：{{detail.orderInfo.statusName}}</div>
            </div>
            <div class="info">

            </div>

            <el-divider content-position="left">线路信息</el-divider>
            <div class="info" style="margin-bottom:0px;">
                 <div>总线路组：{{detail.orderInfo.lineGroupTotalName}}</div>
                 <div>线路组：{{detail.orderInfo.lineGroupName}}</div>
                 <div>线路：{{detail.orderInfo.lineName}}</div>
                 <div>线路段：{{detail.orderInfo.lineSectionName}}</div>
                 <div>开始站点：{{detail.orderInfo.startStationName}}</div>
                 <div>开始车场：{{detail.orderInfo.startCarParkName}}</div>
                 <div>起点围栏：{{detail.orderInfo.startAddressGeofenceName}}</div>
                 <div>终点站点：{{detail.orderInfo.endStationName}}</div>
                 <div>终点车场：{{detail.orderInfo.endCarParkName}}</div>
                 <div>终点车场：{{detail.orderInfo.endCarParkName}}</div>
                 <div>终点围栏：{{detail.orderInfo.endAddressGeofenceName}}</div>
            </div>
            <div class="info" style="grid-template-columns:1fr 1fr;">
                 <div>上车地址：{{detail.orderInfo.startCityName + detail.orderInfo.startDistrictName + detail.orderInfo.startAddress}}</div>
                 <div>下车地址：{{detail.orderInfo.endCityName + detail.orderInfo.endDistrictName + detail.orderInfo.endAddress}}</div>
            </div>

            <el-divider content-position="left" >会员信息</el-divider>
            <div class="info" style="margin-bottom:0px;">
                 <div>UID：{{detail.userInfo?detail.userInfo.uid:''}}</div>
                 <div>手机号：<a v-if="detail.userInfo" @click="lookUserPhone(detail.orderInfo.orderNo)" style="text-decoration: underline;">{{detail.userInfo.mobile}}</a></div>
                 <div>昵称：{{detail.userInfo?detail.userInfo.nickname:''}}</div>
                 <div>VIP等级：{{detail.userInfo?detail.userInfo.vipGradeName:''}}</div>
            </div>

            <el-divider content-position="left">乘客信息</el-divider>
            <el-table :data="detail.passengerList" border >
                <el-table-column label="序号" width="60">
                    <template #default="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="seatName" label="座位"/>
                <el-table-column prop="name" label="姓名"/>
                <el-table-column prop="certificateTypeName" label="证件类型"/>
                <el-table-column prop="certificateNo" label="证件号"/>
                <el-table-column prop="phone" label="手机号">
                    <template #default="scope">
                        <a @click="lookPassengerPhone(scope.row.id)" style="text-decoration: underline;">{{ scope.row.phone }}</a>
                    </template>
                </el-table-column>
                <el-table-column prop="seatPrice" label="座位费">
                    <template #default="scope">
                        {{ scope.row.seatPrice/100 }}
                    </template>
                </el-table-column>
                <el-table-column prop="discountMoney" label="优惠金额">
                    <template #default="scope">
                        {{ scope.row.discountMoney/100 }}
                    </template>
                </el-table-column>

                <el-table-column prop="useCreditNum" label="使用积分">
                    <template #default="scope">
                        {{ scope.row.useCreditNum }}
                    </template>
                </el-table-column>
            </el-table>

            <el-divider content-position="left">操作日志</el-divider>
            <el-table :data="detail.logList" border max-height="500">
                <el-table-column label="序号" width="60">
                    <template #default="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="logTitle" label="操作类型" width="160"/>
                <el-table-column prop="logRemark" label="备注"/>
                <el-table-column prop="updateName" label="操作人" width="160"/>
                <el-table-column prop="updateTime" label="操作时间" width="160"/>
            </el-table>

        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">关闭</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import { TicketOrderApi } from '@/api/intercity/TicketOrderApi'

export default {
    name: 'TicketOrderDetail',
    components: {},
    data() {
        return {
            detail: {
                orderInfo:{},
                userInfo:{}
            },
            dialogVisible: false
        }
    },
    methods: {
        // 显示组件
        show(orderNo) {
            this.dialogVisible = true

            TicketOrderApi.getDetail(orderNo).then((response) => {
                this.detail = response
            })
        },
        lookContactsPhone(orderNo) {
            TicketOrderApi.lookContactsPhone(orderNo).then((response) => {
                this.$alert(response, '联系人手机号', {
                  confirmButtonText: '确定'
                });
            }).catch((err) => {
            })
        },
        lookUserPhone(orderNo) {
            TicketOrderApi.lookUserPhone(orderNo).then((response) => {
                this.$alert(response, '下单人手机号', {
                  confirmButtonText: '确定'
                });
            }).catch((err) => {
            })
        },
        lookPassengerPhone(orderPassnegerId) {
            TicketOrderApi.lookPassengerPhone(orderPassnegerId).then((response) => {
                this.$alert(response, '乘客手机号', {
                  confirmButtonText: '确定'
                });
            }).catch((err) => {
            })
        }
    }
}
</script>

<style>
.order-detail .info {
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1fr;
    line-height:2;
    /* grid-gap:20px; padding:20px; */
}

.el-divider--horizontal {
    margin: 36px 0 24px 0;
}

</style>
